<template>
  <div class="discount-dialog">
    <el-dialog
      :visible.sync="visiabledialog"
      :before-close="handleClickCancel"
      :title="audit? '审核活动': '查看活动' "
      width="900px"
    >
      <div class="basic">
        <div class="header">基本信息</div>
        <p>
          <span class="title">活动名称</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.name }}</span>
        </p>
        <p>
          <span class="title">活动类型</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.type }}</span>
        </p>
        <p>
          <span class="title">活动时间</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.time }}</span>
        </p>
        <p>
          <span class="title">创建人</span>
          <span style="margin-left:50px;color:#333;">{{ dialogData.userName }}</span>
        </p>
      </div>
      <el-table :data="dialogData.tableData" stripe style="width: 100%" max-height="500px">
        <el-table-column label="打折对象">
          <el-table-column prop="title" label="课程名称" min-width="20" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleClickPush(scope.row)">{{ scope.row.title }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="教师" min-width="20" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleClickPush(scope.row.userId)">{{ scope.row.userName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="当前原价" min-width="20" align="center"/>
          <el-table-column prop="discount" label="打折" min-width="20" align="center"/>
          <el-table-column prop="discountPrice" label="当前折后价" min-width="20" align="center">
            <template slot-scope="scope">
              {{ scope.row.price*scope.row.discount/10 }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
        <el-button v-if="audit" type="danger" @click="handleClickRefuse">拒 绝</el-button>
        <el-button v-if="audit" type="success" @click="handleClickAllow">通 过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'Dialog',
  components: {
    Pagination
  },
  props: {
    visiabledialog: {
      type: Boolean,
      default: false
    },
    audit: {
      type: String,
      default: ''
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formLabelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      activeName: '1',
      total: 0,
      currentpage: 1,
      pagesize: 10
    }
  },
  computed: {
  },
  methods: {
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('Visiable', false)
    },
    handleClickPush(val) {
      // 跳转到门户网站
      console.log(val)
    },
    handleClickRefuse() {
      this.dialogData.auditStatus = 'noPassed';
      this.$emit('handleAudit', this.dialogData, '拒绝')
    },
    handleClickAllow() {
      this.dialogData.auditStatus = 'passed';
      this.dialogData.status = 'noBegin';
      this.$emit('handleAudit', this.dialogData, '通过')
    },
    handleSizeChange(val) {
      console.log(val);
      this.currentpage = 1;
      this.pagesize = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentpage = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss">
.discount-dialog {
  .el-dialog {
    .el-table {
      border-radius: 5px;
    }
    .el-table thead.is-group th {
      background-color: #f5f5f5;
    }
    .basic {
      width: 100%;
      height: 230px;
      border-radius: 5px;
      border: 1px solid #ddd;
      margin-bottom: 10px;
      .header {
        width: 100%;
        height: 42px;
        font-size: 14px;
        line-height: 42px;
        padding-left: 10px;
        margin-bottom: 25px;
        color: #909399;
        font-weight: 600;
        background-color: #f5f5f5;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      p {
        height: 25px;
        line-height: 25px;
        padding-left: 50px;
        box-sizing: border-box;
        .title {
          display: inline-block;
          width: 65px;
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
}
</style>
